/**
 * 企业增长趋势
 */
import { defineComponent } from 'vue';
import { WrapTitle, VueChart } from '@common/index';

export default defineComponent({
  name: 'CompanyTrend',
  props: {
    name: String,
    data: Object,
  },
  render(props) {
    const { xAxisData = [], seriesData = [] } = props?.data;

    const axisOption = {
      splitLine: {
        show: true,
        lineStyle: {
          color: '#BAE7FF33',
          type: 'dashed',
        },
      },
    };

    const chartOption = {
      xAxis: {
        ...axisOption,
        type: 'category',
        data: xAxisData,
        axisLabel: {
          color: '#FFFFFF',
          fontSize: 16,
        },
        axisTick: {
          show: true,
          alignWithLabel: true,
        },
        axisLine: {
          onZero: true,
          lineStyle: {
            color: '#ffffff',
          },
        },
      },
      yAxis: {
        ...axisOption,
        type: 'value',
        name: '单位:家',
        nameTextStyle: {
          color: 'rgb(230,247,255,0.7)',
        },
        axisLabel: {
          color: 'rgb(230,247,255,0.7)',
          fontSize: 12,
        },
      },
      series: [
        {
          data: seriesData,
          type: 'line',
          symbol: 'circle',
          symbolSize: 10,
          lineStyle: {
            color: '#1E56FE',
            width: 4,
          },
          itemStyle: {
            normal: {
              color: '#1E56FE',
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#FCFCFC',
                  fontSize: 16,
                },
              },
              borderColor: '#FFFFFF',
              borderWidth: 2,
            },
          },
        },
      ],
      grid: {
        left: '5%',
        right: '5%',
        bottom: '7%',
        containLabel: true,
        show: true,
        borderColor: 'none',
      },
    };

    return (
      <div id="CompanyTrend">
        <WrapTitle title={props.name + '企业增长趋势'}></WrapTitle>

        <VueChart option={chartOption} style={{ width: '480px' }} />
      </div>
    );
  },
});
